<template>
    <footer class="footer">
        <router-link tag="div" to="/" class="active">
            <img src="../assets/logo.png">
            <figcaption>外卖</figcaption>
        </router-link>

        <router-link tag="div" to="/faxian">
            <img src="../assets/logo.png">
            <figcaption>发现</figcaption>
        </router-link>
        
        <router-link tag="div" to='/dingdan'>
            <img src="../assets/logo.png">
            <figcaption>订单</figcaption>
        </router-link>
        
        <router-link tag="div" to='/my'>
            <img src="../assets/logo.png">
            <figcaption>我的</figcaption>
        </router-link>
    </footer>
</template>

<script>
export default {

}
</script>

<style scoped lang='less'>
.footer{
    // margin-top: 5000px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 999;
    width: 100%;
    background: white;
    box-shadow: 0 -5px 5px #ccc;
    div{
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 25%;
      text-align: center;
      padding: 1% 0;
      color: #ccc;
      img{
          width: 25%;
      }
    }
    .active{
      background: #efcc6b;
      color: #000;
    }
  }
</style>

